import { Component } from 'react';
import { Context, Card, Icon,Button,Group,Scroller, Toast } from 'saltui';
import { Eye } from 'salt-icon';
import timg from  './timg.jpg';
import '../common/css/oaicon.less'
import './PageHome.less'
import Console from '../console/Console';


export default class Work extends  React.Component  {

  constructor(props) {

    Toast.show({
      type: 'loading',
      content: typeof test,
    });
    super(props);
    this.state = {
    };
  }

  handleClick(event, dataItem) {
    console.log(event);
    console.log(dataItem);
  }

  handleClickImg(event, imgUrl) {
    console.log(event);
    console.log(imgUrl);
  }

  handleDelete(event, dataItem) {
    console.log(event);
    console.log(dataItem);
  }
  handleScrollEnd(scroller) {
    const { x, y } = scroller;
    console.log({ x, y });
  }

  handTest = (url,e) =>{
    alert(url);
    if(typeof test != 'undefined'){
      test.init(url);
    }
  }

  render() {

    const headerCls = Context.prefixClass('card-header');
    const bodyCls = Context.prefixClass('card-body');
    const footerCls = Context.prefixClass('card-footer');

    return (
      <div>

        <div className="card-wrap work-card">
          <Card className="card-sence">
            <div className={headerCls}>
              <img className="card-avatar" src={timg} alt="avatar" />
              <div className="card-header-text">
                <span className="card-username">温妮</span>
                <span className="card-date">前台</span>
              </div>
            </div>
            <div className={bodyCls}>
              <div className="card-title">重庆酒店</div>
            </div>
            <div className={footerCls}>
              <div className="card-footer-meta">
                <Button type="primary" size="small" display="inline">退出</Button>
              </div>
              <div className="card-footer-extra">2018年11月17日</div>
            </div>
          </Card>

          <div className="t-MB10 t-ML10   lineByRem"><h1 className="t-PT10">工作台</h1></div>

          <Card className="card-sence work-card">
            <div className="t-MB10 t-ML10 work-header"><h1 className="t-PT10">客房</h1></div>

            <hr/>
            <div className="work-content">
               <div className="work-div"　onClick={(e) => this.handTest("roomcreate",e)}>
                 <i className="oaicon-work"></i>
                 <span>创建客房</span>
               </div>
              <div className="work-div " onClick={(e) => this.handTest("roommanage",e)}>
                <i  className="oaicon-work oaicon-work-1"></i>
                <span>客房管理</span>
              </div>
              <div className="work-div" onClick={(e) => this.handTest("roomsetting",e)}>
                <i  className="oaicon-work oaicon-work-2"></i>
                <span>客房配置</span>
              </div>
              <div className="work-div" onClick={(e) => this.handTest("roomhandle",e)}>
                <i  className="oaicon-work oaicon-work-3"></i>
                <span>客房操作</span>
              </div>
            </div>
          </Card>
          <Card className="card-sence work-card">
            <div className="t-MB10 t-ML10 work-header"><h1 className="t-PT10">财务</h1></div>

            <hr/>
            <div className="work-content">
              <div className="work-div" onClick={(e) => this.handTest("financesetting",e)}>
                <i  className="oaicon-work oaicon-work-4"></i>
                <span>财务配置</span>
              </div>
            </div>
          </Card>

        </div>
         <Console history={this.props.history} activeIndex="2" />
      </div>
    )
  }
}

